<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="login_data">
        <div class="screen_wrapper">
            <form class="layui-form login_data_form">
                <div class="layui-form-item">
                    <label class="layui-form-label">店铺</label>
                    <div class="layui-input-block">
                        <select name="shop" lay-search lay-filter="shopSelect">
                            <option value="DD001">DD001</option>
                            <option value="DD002">DD002</option>
                            <option value="DD003">DD003</option>
                        </select>
                    </div>
                </div>
                <!-- 2020-02-17 start -->
                <div class="layui-form-item">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" id="startTime">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" id="endTime">
                    </div>
                </div>
                <!-- 2020-02-17 end -->
            </form>
        </div>
        <div class="table-wrapper">
            <table class="layui-table" id="shop_table">
                <thead>
                    <tr>
                        <th>头像</th>
                        <th>姓名</th>
                        <th>职位</th>
                        <th>性别</th>
                        <th>电话</th>
                        <th>登录次数</th>
                        <th>首次登录时间</th>
                        <th>最后登录时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="avatar">
                            <img src="../../images/test.JPG" alt="">
                        </td>
                        <td>刘毅华</td>
                        <td>SA</td>
                        <td>男</td>
                        <td>18975157865</td>
                        <td>10</td>
                        <td>2020-02-10 13:38:00</td>
                        <td>2020-02-10 18:11:02</td>
                    </tr>
                    <tr>
                        <td class="avatar">
                            <img src="../../images/test.JPG" alt="">
                        </td>
                        <td>赵虹蕊</td>
                        <td>SA</td>
                        <td>女</td>
                        <td>13898291929</td>
                        <td>8</td>
                        <td>2020-02-10 13:38:00</td>
                        <td>2020-02-10 18:11:02</td>
                    </tr>
                    <tr>
                        <td class="avatar">
                            <img src="../../images/test.JPG" alt="">
                        </td>
                        <td>吕海洋</td>
                        <td>SA</td>
                        <td>女</td>
                        <td>15607399829</td>
                        <td>2</td>
                        <td>2020-02-10 13:38:00</td>
                        <td>2020-02-10 18:11:02</td>
                    </tr>
                </tbody>
            </table>
            <div id="paging"></div>
        </div>
    </div>

    <!-- 新增店铺Modal -->
    <div class="modal fade" id="addShopModal" tabindex="-1" role="dialog" aria-labelledby="addShopModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form class="layui-form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="addShopModalLabel">新增</h4>
                    </div>
                    <div class="modal-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">店代码</label>
                            <div class="layui-input-block">
                                <input type="text" name="shopId" required lay-verify="required" placeholder="请输入店代码"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">店名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="shopName" required lay-verify="required" placeholder="请输入店名称"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">公司ID</label>
                            <div class="layui-input-block">
                                <input type="text" name="companyId" required lay-verify="required" placeholder="请输入公司ID"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">企业secret</label>
                            <div class="layui-input-block">
                                <input type="text" name="secret" required lay-verify="required"
                                    placeholder="请输入企业应用secret" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">管理员帐号</label>
                            <div class="layui-input-block">
                                <input type="text" name="managerAccount" placeholder="请输入管理员帐号" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="radio" lay-filter="shopState" name="state" value="use" title="可用" checked>
                                <input type="radio" lay-filter="shopState" name="state" value="unuse" title="不可用">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn danger-bg" lay-submit lay-filter="addShopSubmit">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 修改店铺Modal -->
    <div class="modal fade" id="editShopModal" tabindex="-1" role="dialog" aria-labelledby="editShopModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form class="layui-form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="editShopModalLabel">修改</h4>
                    </div>
                    <div class="modal-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">店代码</label>
                            <div class="layui-input-block">
                                <input type="text" name="editShopId" required lay-verify="required" placeholder="请输入店代码"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">店名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="editShopName" required lay-verify="required"
                                    placeholder="请输入店名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">公司ID</label>
                            <div class="layui-input-block">
                                <input type="text" name="editCompanyId" required lay-verify="required"
                                    placeholder="请输入公司ID" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">企业secret</label>
                            <div class="layui-input-block">
                                <input type="text" name="editSecret" required lay-verify="required"
                                    placeholder="请输入企业应用secret" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="radio" lay-filter="editShopState" name="editState" value="use" title="可用"
                                    checked>
                                <input type="radio" lay-filter="editShopState" name="editState" value="unuse"
                                    title="不可用">
                            </div>
                        </div>
                        <!-- 2020-02-10 Verson1.0 -->
                        <table class="layui-table" id="manager_account_table">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>管理员帐号</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <!-- 2020-02-10 Verson1.0 -->
                        <div class="layui-btn add_account_btn danger-bg">新增管理员</div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn danger-bg" lay-submit lay-filter="editShopSubmit">修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.js"></script>
    <script>
        // 2020-02-17 start
        // 获取当前日期 + 时间
        function getDateTime() {
            var mydate = new Date();
            var str = "" + mydate.getFullYear() + "-";
            let month = "";
            let day = "";
            let hours = mydate.getHours(); // 获取当前小时数(0-23)
            let min = mydate.getMinutes(); // 获取当前分钟数(0-59)
            let sec = mydate.getSeconds(); // 获取当前秒数(0-59)
            if (mydate.getMonth() < 10) {
                month = "0" + (mydate.getMonth() + 1);
            } else {
                month = mydate.getMonth() + 1;
            }
            if (mydate.getDate() < 10) {
                day = "0" + mydate.getDate();
            } else {
                day = mydate.getDate();
            }
            str += month + "-";
            str += day + " ";
            str += hours + ":";
            str += min + ":";
            str += sec;
            return str;
        }
        // 2020-02-17 end
        // 实例化表单
        layui.use('form', function () {
            var form = layui.form;
            // 店铺选择
            form.on('select(shopSelect)', function (data) {
                let shopId = data.value // 选择的店铺shopid
            })
            // 表格分页
            layui.use('laypage', function () {
                var laypage = layui.laypage;

                //执行一个laypage实例
                laypage.render({
                    elem: 'paging',
                    limit: 5,
                    theme: '#E51C23',
                    count: 20, //数据总数，从服务端得到
                    jump: function (obj, first) {
                        //obj包含了当前分页的所有参数，比如：
                        console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                        console.log(obj.limit); //得到每页显示的条数

                        //首次不执行
                        if (!first) {
                            //do something
                        }
                    }
                });
            });


            // 2020-02-17 start
            // 时间
            layui.use('laydate', function () {
                var laydate = layui.laydate;
                let nowDateTime = getDateTime(); // 拿到系统当前时间
                //开始时间
                let startDateTime = laydate.render({
                    elem: '#startTime', //指定元素
                    max: nowDateTime, // 最大时间取系统当前时间
                    type: 'datetime',
                    done: function (value, date, endDate) {
                        console.log(value) // 开始时间的值
                        endDateTime.config.min = {
                            year: date.year,
                            month: date.month - 1,
                            date: date.date,
                            hours: date.hours,
                            minutes: date.minutes,
                            seconds: date.seconds
                        };
                    }
                });

                //结束时间
                let endDateTime = laydate.render({
                    elem: '#endTime', //指定元素
                    max: nowDateTime, // 最大时间取系统当前时间
                    type: 'datetime',
                    done: function (value, date, endDate) {
                        console.log(value) // 结束时间的值
                    }
                });
            });
            // 2020-02-17 end
        });
    </script>
</body>

</html>